<template>
  <Drawer
    :is-visible="isVisible"
    @close-drawer="(flag) => emitClose(flag)"
    @save-drawer="emitSave"
  >
    <template #header>
      <h3
        v-cloak
        class="fn18 flex-middle active no-select"
      >
        <template v-if="type === EBtnType.add">
          <Plus style="width: 2rem;height: 2rem;margin-right: 5px;"/>
          新增
        </template>
        <template v-if="type === EBtnType.edit">
          <EditPen style="width: 2rem;height: 2rem;margin-right: 5px;"/>
          编辑
        </template>
      </h3>
    </template>
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-suffix="："
      status-icon
      label-width="160px"
    >
      <el-form-item
        label="业务类型"
        prop="businesstype">
        <el-select
          v-model="form.businesstype"
          class="w100"
          clearable
          placeholder="业务类型"
        >
          <el-option
            v-for="item in businessType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="企业名称"
        prop="companycode">
        <el-select
          v-model="form.companycode"
          class="w100"
          clearable
          placeholder="企业名称"
        >
          <el-option
            v-for="item in companySelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="站点名称"
        prop="sitecode">
        <el-select
          v-model="form.sitecode"
          class="w100"
          clearable
          placeholder="站点名称"
        >
          <el-option
            v-for="item in siteSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="电站名称"
        prop="stationname">
        <el-input
          v-model="form.stationname"
          clearable
          placeholder="请输入电站名称"
        />
      </el-form-item>
      <el-form-item
        label="电站编号"
        prop="stationcode">
        <el-input
          v-model="form.stationcode"
          clearable
          placeholder="请输入电站编号"
        />
      </el-form-item>
      <el-form-item
        label="用户性质"
        prop="userproperty">
        <el-select
          v-model="form.userproperty"
          class="w100"
          clearable
          placeholder="用户性质"
        >
          <el-option
            v-for="item in userproperty"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="用户类别"
        prop="usertype">
        <el-select
          v-model="form.usertype"
          class="w100"
          clearable
          placeholder="用户类别"
        >
          <el-option
            v-for="item in usertype"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="站点类型"
        prop="stationtype">
        <el-select
          v-model="form.stationtype"
          class="w100"
          clearable
          placeholder="站点类型"
        >
          <el-option
            v-for="item in stationtype"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="供电单位"
        prop="powersupply">
        <el-input
          v-model="form.powersupply"
          clearable
          placeholder="请输入供电单位"
        />
      </el-form-item>
      <el-form-item
        label="电压等级"
        prop="powerlevel">
        <el-select
          v-model="form.powerlevel"
          class="w100"
          clearable
          placeholder="站点类型"
        >
          <el-option
            v-for="item in powerlevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="主变总数"
        prop="mainnumber">
        <el-input
          v-model="form.mainnumber"
          clearable
          placeholder="请输入主变总数"
        />
      </el-form-item>
      <el-form-item
        label="装机容量"
        prop="installedcapacity">
        <el-input
          v-model="form.mainnumber"
          clearable
          placeholder="请输入装机容量"
        />
      </el-form-item>
      <el-form-item
        label="运行容量"
        prop="runcapacity">
        <el-input
          v-model="form.runcapacity"
          clearable
          placeholder="请输入运行容量"
        />
      </el-form-item>
      <el-form-item
        label="用电地址"
        prop="address">
        <el-input
          v-model="form.address"
          clearable
          placeholder="请输入用电地址"
        />
      </el-form-item>
      <el-form-item
        label="用电单价"
        prop="electricity_price">
        <el-input
          v-model="form.electricity_price"
          clearable
          placeholder="请输入用电单价"
        />
      </el-form-item>
      <el-form-item
        label="配电管理部门"
        prop="Contact">
        <el-input
          v-model="form.Contact"
          clearable
          placeholder="请输入配电管理部门"
        />
      </el-form-item>
      <el-form-item
        label="配电管理部门电话"
        prop="tel">
        <el-input
          v-model="form.tel"
          clearable
          placeholder="配电管理部门电话"
        />
      </el-form-item>
    </el-form>
  </Drawer>
</template>

<script lang="ts" setup>
import { Plus, EditPen } from '@element-plus/icons-vue'
import { form, rules, saveAdd, saveEdit } from './operate'
import { businessType, userproperty, usertype, stationtype, powerlevel } from '@/data/select'
import Drawer from '@/components/Drawer/index.vue'
import { EBtnType } from '@/types/btn'
import { companySelect, siteSelect } from '@/compoase/useArchiveSelect'
const props = defineProps<{
  isVisible: boolean
  type: EBtnType,
  handleQuery: Function
}>()
const emits = defineEmits<{
  (e: 'update:visible', flag: boolean): void
}>()
const emitClose = (flag: boolean) => {
  emits('update:visible', flag)
}
const emitSave = () => {
  console.log('form:', form)
  if (props.type === EBtnType.add) saveAdd(props.handleQuery)
  else if (props.type === EBtnType.edit) saveEdit(props.handleQuery)
}
</script>

<style lang="scss" scoped>

</style>
